<template>
  <div class="workbench-wrapper">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container" >
        <div class="imgTable">
            <div class="header">
                <div class="gap-top">
                    <mds-tag v-for="(item,index) in tagList" :key="index" :color="item.color">{{item.name}}</mds-tag>

                </div>
            </div>
            <div class="cardBox">
                    <mds-card class="mds-card" style="padding:24px;" :bodyStyle="bodyStyle">
                        <div class="addBox">
                            <mds-icon type="plus" />
                            <span>添加内容</span>
                        </div>
                    </mds-card>
                    <mds-card v-for="(item,index) in cardlist" :key="index" class="mds-card"  :bodyStyle="bodyStyle">
                        <div class="custom-image" :style="item.backColor">
                            <div class="imgbox">
                                <span class="imgtitle">{{item.imgtitle}}</span>
                                <span class="imgSubtitle">{{item.imgSubtitle}}</span>
                            </div>
                        </div>
                        <div class="content">
                            <span class="title">{{item.title}}</span>
                            <div class="discraption">{{item.discraption}}</div>
                        </div>
                        <div class="handleBox">
                            <span class="cardbtn">操作按钮</span>
                            <div class="cardbtn">查看功能</div>
                        </div>
                    </mds-card>
            </div>
        </div>
      </div>
      <mds-card slot="info" class="mds-card" style="width: 280px" :loading="true">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'

export default {
  data() {
    return {
      tagList: [
        {
          color: 'blue',
          name: '图文操作'
        }, {
          color: '#666',
          name: '话机'
        }, {
          color: '#666',
          name: '网络'
        }, {
          color: '#666',
          name: '电脑'
        }, {
          color: '#666',
          name: '视频会议'
        }, {
          color: '#666',
          name: '邮箱'
        }, {
          color: '#666',
          name: '打印机'
        }
      ],
      cardlist: [{
        imgtitle: '标题文案',
        backColor: 'background:linear-gradient(157deg,rgba(200,59,249,1) 0%,rgba(24,0,120,0) 100%);',
        imgSubtitle: '副标题文案',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…'
      }, {
        imgtitle: '标题文案',
        backColor: 'background:linear-gradient(157deg,rgba(59,186,249,1) 0%,rgba(24,0,120,0) 100%);',
        imgSubtitle: '副标题文案',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…'
      }, {
        imgtitle: '标题文案',
        backColor: 'background:linear-gradient(157deg,rgba(200,59,249,1) 0%,rgba(24,0,120,0) 100%);',
        imgSubtitle: '副标题文案',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…'
      }, {
        imgtitle: '标题文案',
        backColor: 'background:linear-gradient(157deg,rgba(59,186,249,1) 0%,rgba(24,0,120,0) 100%);',
        imgSubtitle: '副标题文案',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…'
      }, {
        imgtitle: '标题文案',
        backColor: 'background:linear-gradient(157deg,rgba(200,59,249,1) 0%,rgba(24,0,120,0) 100%);',
        imgSubtitle: '副标题文案',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…'
      }, {
        imgtitle: '标题文案',
        backColor: 'background:linear-gradient(157deg,rgba(59,186,249,1) 0%,rgba(24,0,120,0) 100%);',
        imgSubtitle: '副标题文案',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…'
      }],
      bodyStyle: {
        padding: '0',
        height: '100%'
      }
    }
  },
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  }
}
</script>
<style lang="scss" scoped>
    .imgTable{
        background: #EEF0F3;
        .header{
            background: #EEF0F3;
                position: absolute;
                /* margin-top: -30px; */
                top: 46px;
                width: 100%;
                left: 0;
                background: white;
                padding: 19px 24px 5px 24px;
                z-index: 9999;
        }
        .cardBox{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            height: 100%;
            padding-top: 70px;
            .mds-card{
               width:271px;
                height:310px;
                background:rgba(255,255,255,1);
                box-shadow:0px 6px 12px 0px rgba(0,0,0,0.04);
                border-radius:8px 8px 0px 0px;
                display: flex;
                flex-direction: column;
                margin:0 18px 18px 0;
                .addBox{
                    height: 100%;
                    border:1px solid rgba(202,210,221,1);
                    // margin: 24px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size:14px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    color:rgba(127,143,164,1);
                    line-height:22px;
                }
                .custom-image{
                    width:271px;
                    height:164px;
                    background:linear-gradient(157deg,rgba(200,59,249,1) 0%,rgba(24,0,120,0) 100%);
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: row;
                    // align-items: center;
                    .imgbox{
                        width: 40%;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                        .imgtitle{
                            // width:64px;
                            // height:24px;
                            font-size:16px;
                            font-family:PingFangSC-Medium,PingFang SC;
                            font-weight:500;
                            color:rgba(255,255,255,1);
                            line-height:24px;
                        }
                        .imgSubtitle{
                            // width:60px;
                            // height:20px;
                            font-size:12px;
                            font-family:PingFangSC-Regular,PingFang SC;
                            font-weight:400;
                            color:rgba(255,255,255,1);
                            line-height:20px;
                        }
                    }

                }
                .content{
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    padding: 16px 28px 18px 16px;
                    .title{
                        font-size:16px;
                        font-family:PingFangSC-Medium,PingFang SC;
                        font-weight:500;
                        color:rgba(53,64,82,1);
                        line-height:24px;
                        text-align: start;
                    }
                    .discraption{

                        font-size:14px;
                        font-family:PingFangSC-Regular,PingFang SC;
                        font-weight:400;
                        color:rgba(127,143,164,1);
                        line-height:22px;
                        text-align: start;
                    }

                }
                .handleBox{
                    display: flex;
                    justify-content: start;
                    flex-direction:row;
                    padding: 0px 16px 16px 16px;
                    .cardbtn{
                        font-size:14px;
                        font-family:PingFangSC-Regular,PingFang SC;
                        font-weight:400;
                        color:rgba(3,100,255,1);
                        line-height:22px;
                        cursor: pointer;
                        margin-right: 32px;
                    }
                }

            }
        }
    }
</style>
